<template>
  <div class="brand">
    <n-space>
      <n-button type="info" @click="handleAdd">添加</n-button>
<!--      <n-button type="error">批量删除</n-button>-->
    </n-space>
    <br/>
    <n-data-table
        remote
        :data="list"
        :pagination="pagination"
        :columns="columns"
        :size="'small'"
    ></n-data-table>
    <BrandModal ref="modal" @list="getList"></BrandModal>
  </div>
</template>

<script lang="ts">
export default {
  name: "brand"
}
</script>

<script setup lang="ts">
import {onMounted, reactive, ref, h} from "vue"
import BrandModal from '@/view/shopping/brand/BrandModal.vue'
import {brandColumns, BrandListFormType, BrandListResType, BrandUpdateType} from '@/view/shopping/brand/brandType'
import {ums_brand_delete, ums_brand_list} from '@/api/sms'
import useSystem from '@/hooks/useSystem'
import {NSpace, NButton} from 'naive-ui'

const {list, success, error, pagination} = useSystem<BrandListResType[]>(getList)

const modal = ref<{
  init: (data?: BrandUpdateType) => void
}>()

const formData = reactive<BrandListFormType>({
  brand_name: "",
  category_name: ""
})

const handleAdd = () => {
  modal.value?.init()
}

const columns = brandColumns((r:BrandListResType) => {
  return h(NSpace, {}, [
    h(NButton, {
      type: "info",
      onClick: () => {
        modal.value?.init(r)
      }
    }, "编辑"),
    h(NButton, {
      type: "error",
      onClick: () => {
        ums_brand_delete({
          brand_id: r.brand_id
        }).then(res => {
          if (res.code === 200) {
            success(res.message)
            getList()
          }else {
            error(res.message)
          }
        })
      }
    }, "删除")
  ])
})

function getList () {
  ums_brand_list({
    pageSize: pagination.pageSize,
    current: pagination.page,
    data: formData
  }).then(res => {
    pagination.itemCount = res.data.total
    pagination.pageSize = res.data.pageSize
    pagination.page = res.data.current
    list.value = res.data.list
  })
}



onMounted( () => {
  getList()
})
</script>

<style scoped lang="scss">

</style>
